<template>
  <li class="todo-item clear">
    <span class="todo-item-state" :class="{ done: item.state }"></span>
    <input
      v-if="item.id == curId"
      type="text"
      class="todo-item-edit"
      @keydown.enter="editDone"
      @keydown.esc="editCancel(item)"
      @blur="editDone"
      @focus="editBefore(item.text)"
      v-focus
    />
    <p v-else class="todo-item-show" @dblclick="curId = item.id">
      {{ item.text }}
    </p>
    <a href="" class="todo-item-del" @click.prevent="delTodo(item.id)">X</a>
  </li>
</template>

<script>
export default {
  name: "TodoListItem",
  props: ["item"],
  methods: {
    delTodo(id) {
      this.$emit("itemDel", id);
    },
  },
};
</script>

<style lang="scss" scoped>
.todo-item {
  margin-bottom: 10px;
  line-height: 30px;

  .todo-item-state {
    float: left;
    width: 12px;
    height: 12px;
    background: #999;
    margin-right: 10px;
    margin-top: 9px;
  }
  .done {
    background: #159edd;
  }
  .todo-item-show {
    float: left;
    height: 30px;
  }
  .todo-item-edit {
    height: 30px;
    float: left;
    outline: none;
    padding: 0 5px;
    box-sizing: border-box;
  }

  .todo-item-del {
    float: right;
    line-height: 30px;
    color: #f14b21;
    display: none;
  }
  &:hover .todo-item-del {
    display: inline;
  }
}
</style>